<%@ taglib prefix="s" uri="/struts-tags"%>
<%@page contentType="text/html;charset=UTF-8"%>

	<script type="text/javascript">
		// URL to call ajax
		var LIST_MODULE_URL   = "<s:url value='/securityList/groupModuleAjax_SearchModule'/>";
		var ADD_MODULE_URL    = "<s:url value='/securityList/groupModuleAjax_AddModule'/>";
		var UPDATE_MODULE_URL = "<s:url value='/securityList/groupModuleAjax_UpdateModule'/>";
		var REMOVE_MODULE_URL = "<s:url value='/securityList/groupModuleAjax_DeleteModule'/>";

		var url;
		function newModule(){
			$('#dlg').dialog('open').dialog('setTitle','New Module');
			$('#fm').form('clear');
			url = ADD_MODULE_URL;
		}
		function editModule(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$('#dlg').dialog('open').dialog('setTitle','Edit Module');
				$('#fm').form('load',row);
				url = UPDATE_MODULE_URL + '?moduleCode='+row.moduleCode;
				alert(row.id);
			}
		}
		function saveModule(){
			$('#fm').form('submit',{
				url: url,
				onSubmit: function(){
					var valid = $(this).form('validate'); 
					if (valid) {
						$.messager.progress(); 
					}
					return valid;
				},
				success: function(result){
					$.messager.progress('close');
					var result = eval('('+result+')');
					if (result.successMessage != ''){
						$('#dlg').dialog('close');		// close the dialog
						$.messager.alert('Info', result.successMessage);
						$('#dg').datagrid('reload');	// reload the user data
					} else {
						$.messager.alert('Error', result.failMessage);
					}
				}
			});
		}
		function removeModule(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$.messager.confirm('Confirm','Are you sure you want to remove this module?',function(r){
					if (r){
						$.messager.progress();
						$.post(REMOVE_MODULE_URL,{moduleCode:row.moduleCode},function(result){
							$.messager.progress('close');
							if (result.successMessage){
								$.messager.alert('Info', result.successMessage);
								$('#dg').datagrid('reload');	// reload the user data
							} else {
								$.messager.alert('Error', result.failMessage);
							}
						},'json');
					}
				});
			}
		}
	</script>

<center>
	<h2>Security List - Manage Module</h2>
</center>
<center>
	<table id="dg" title="Module List" class="easyui-datagrid" style="width:850px;height:250px"
			toolbar="#toolbar" fitColumns="true"
			data-options="
				rownumbers:true,  
                singleSelect:true,  
                autoRowHeight:false,  
                singleSelect: true,
				url: LIST_MODULE_URL,
				loadFilter: function(data) {
					if (data.moduleInfoList !== null && data.moduleInfoList !== undefined) {
						return {rows: data.moduleInfoList, total: data.moduleInfoList.length}
					} else {
						return {rows: [], total: 0}
					}					
				},
				method: 'post'
			">
		<thead>
			<tr>
				<th data-options="field:'moduleCode',width:100">Module Code</th>
				<th data-options="field:'moduleName',width:200">Module Name</th>
			</tr>
		</thead>
	</table>
	<div id="toolbar">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newModule()">New Module</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeModule()">Remove Module</a>
	</div>
</center>
	<div id="dlg" class="easyui-dialog" style="width:400px;padding:10px 20px"
			closed="true" buttons="#dlg-buttons">
		<div class="ftitle">Module Information</div>
		<form id="fm" method="post" novalidate>

			<div class="fitem" style="width: 100%">
				<label style="width: 30%;display: block;">Module Code:</label>
				<input name="moduleCode" class="easyui-validatebox" required="true">
			</div>

			<div class="fitem" style="width: 100%">
				<label style="width: 30%;display: block;">Module Name:</label>
				<input name="moduleName" class="easyui-validatebox" required="true">
			</div>

			<div class="fitem" style="width: 100%">
				<label style="width: 30%;display: block;" for="moduleUri">Module URI : </label>
				<input tabindex="1" name="accessmodule.moduleUri" id="moduleUri" maxlength="200"/>
			</div>
			
			<div class="fitem" style="width: 100%">
				<label style="width: 30%;display: block;" for="orderBy">Order By: </label>
				<input tabindex="1" name="accessmodule.orderBy" id="orderBy"/>
			</div>
			
			<div class="fitem" style="width: 100%">
				<label style="width: 30%;display: block;" for="parentModuleList">Parent: </label>
				<s:if test="parentModuleList.{moduleName} != null">
					<s:select name="parent" headerKey="" theme="simple"
						id="parentModuleList" headerValue="--- Select ---" key="moduleCode"
						list="parentModuleList"	listKey="moduleCode" listValue="moduleName">
					</s:select>
				</s:if>
				<s:else>
					<s:select name="parent" headerKey="" theme="simple"
						id="listParent" headerValue="--- Select ---" key="parentCode"
						list="''">
					</s:select>
				</s:else>
			</div>

		</form>
	</div>
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveModule()">Save</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
	</div>
